<template>
  <div style="height: 100%; width: 100%;">
    <!-- 自动机器学习 分类 -->
    <div class="tree">
      <div class="m_title">
        <div class="divider"></div>
        <strong>模型结果</strong>
      </div>
      <div class="result">
        <strong
          >提示：以下为本次机器学习所使用的模型及各个模型使用的参数说明</strong
        >
        <a-table
          class="table"
          :columns="columns"
          :data-source="souceData"
          row-key="id"
          bordered
        >
          <span slot="data" slot-scope="text, record">
            {{ record.data_preprocessing }}
          </span>
          <span slot="feature" slot-scope="text, record">
            {{ record.feature_preprocessor }}
          </span>
          <span slot="parameters" slot-scope="text, record">
            {{ record.model_parameters }}
          </span>
        </a-table>
      </div>

      <div class="m_title">
        <div class="divider"></div>
        <strong>整体评估</strong>
      </div>
      <div class="access">
        <a-row>
          <a-col
            v-for="item in circelArray"
            :key="item.title"
            :span="6"
            class="circle-block"
          >
            <svg class="c-c-c">
              <circle
                cx="40"
                cy="40"
                r="35"
                stroke="#eee"
                stroke-width="8"
                fill="none"
                :stroke-dashoffset="`${80 * Math.PI}px`"
              />
              <circle
                cx="40"
                cy="40"
                r="35"
                stroke="#78C06E"
                stroke-width="8"
                fill="none"
                :stroke-dasharray="item.dasharray"
                class="blue-circle progress"
              />
              <text x="15" y="5" fill="#5D637E" transform="rotate(90 20,20)">
                {{ item.percent }}
              </text>
            </svg>
            <!-- <Chart :chart-type="'pieChart'" :config="commonConfig" /> -->
            <!-- <div class="circle-title">
              <b>{{ item.title }}</b
              ><a-icon-font type="iconinfo-cirlce-o" class="icon"></a-icon-font>
              <p>{{ item.english }}</p>
            </div> -->
            <a-tooltip placement="right">
              <template slot="title">
                <span>{{ item.explain }}</span>
              </template>
              <div class="circle-title">
                <b>{{ item.title }}</b
                ><a-icon-font
                  type="iconinfo-cirlce-o"
                  class="icon"
                ></a-icon-font>
                <p>{{ item.english }}</p>
              </div>
            </a-tooltip>
          </a-col>
        </a-row>
      </div>

      <div class="m_title">
        <div class="divider"></div>
        <strong>详细评估</strong>
      </div>
      <a-row>
        <a-col :span="12" style="text-align: left;">Confusion Matrix：</a-col>
        <a-col :span="12" style="text-align: right;"
          >{{
            `${modelData.param && modelData.param.label_col}={${
              labelListString
                ? labelListString
                : modelData.data && modelData.data.label_list.toString()
            }` + '}'
          }}
        </a-col>
      </a-row>
      <table
        v-if="modelData.data && modelData.data.label_list"
        class="dtc_table"
        style="table-layout: fixed;"
      >
        <tr>
          <th :colspan="24 / modelData.data.label_list.length" scope="row">
            <svg style="height: 44px; vertical-align: middle; width: 100%;">
              <line x1="0" y1="0" x2="100%" y2="100%" stroke="#e8e8e8" />
              <text x="10" y="40" fill="black">Pred</text>
              <text x="95%" text-anchor="end" y="20" fill="black">True</text>
            </svg>
          </th>
          <th
            v-for="item in modelData.data && modelData.data.label_list"
            :key="item"
            :colspan="24 / modelData.data.label_list.length"
            scope="row"
          >
            {{ item }}
          </th>
        </tr>
        <tr
          v-for="(y, row) in modelData.data && modelData.data.label_list"
          :key="`label${row}`"
        >
          <td :colspan="24 / modelData.data.label_list.length">{{ y }}</td>
          <td
            v-for="(item, index) in modelData.data &&
            modelData.data.confusion_matrix[row]"
            :key="`matrix${index}`"
            :colspan="24 / modelData.data.label_list.length"
          >
            {{ item }}
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
// 连线
import LineOfRelationalConnection from '@/components/studio/data/model/Line.vue'
import DataViewStore from '@/store/modules/dataview'
import DrawDecisionTree from '@/components/studio/data/model/DrawDecisionTree.vue'
import MyDecisionTree from '@/components/studio/data/model/MyDecisionTree.vue'
import Chart from '@/components/chart/chart.vue'

@Component({
  components: {
    LineOfRelationalConnection,
    DrawDecisionTree,
    MyDecisionTree,
    Chart,
  },
})
export default class AutoClassification extends Vue {
  public data: any = []
  public labelListString: string | null = null

  public circelArray: any = []

  public columns = [
    {
      title: '模型',
      key: 'model',
      dataIndex: 'model',
    },
    {
      title: '权重',
      key: 'weight',
      dataIndex: 'weight',
    },
    {
      title: '数据预处理',
      dataIndex: 'data',
      key: 'data',
      scopedSlots: { customRender: 'data' },
    },
    {
      title: '特征预处理',
      dataIndex: 'feature',
      key: 'feature',
      scopedSlots: { customRender: 'feature' },
    },
    {
      title: '模型参数',
      dataIndex: 'parameters',
      key: 'parameters',
      scopedSlots: { customRender: 'parameters' },
    },
  ]
  public souceData = []

  public get modelData() {
    return DataViewStore.selectModel
  }

  @Watch('modelData.data')
  public getModelData() {
    this.init()
  }

  public created() {
    this.init()
  }

  public init() {
    const { data } = this.modelData

    this.circelArray = []
    this.circelArray.push(
      {
        title: '准确率',
        english: 'Accuracy',
        explain: '预测正确的样本数，占总样本数的比重。',
        percent: data ? `${(data.accuracy_test * 100).toFixed(2)}%` : '-',
        dasharray: `${data.accuracy_test * 70 * Math.PI}px,${70 * Math.PI}px`, // 70 为直径
      },
      {
        title: 'F1-值',
        english: 'F1-score',
        explain:
          'F1值为算数平均数除以几何平均数，且越大越好，将Precision和Recall的上述公式带入会发现，当F1值小时，True Positive相对增加，而false相对减少，即Precision和Recall都相对增加，即F1对Precision和Recall都进行了加权。',
        percent: data ? `${(data.Fmeasure_test * 100).toFixed(2)}%` : '-',
        dasharray: `${data.Fmeasure_test * 70 * Math.PI}px,${70 * Math.PI}px`,
      },
      {
        title: '精确率',
        english: 'Precision',
        explain:
          '查准率，即正确预测为正的，占全部预测为正的比例。*此处为macro平均',
        percent: data ? `${(data.precision_test * 100).toFixed(2)}%` : '-',
        dasharray: `${data.precision_test * 70 * Math.PI}px,${70 * Math.PI}px`,
      },
      {
        title: '召回率',
        english: 'Recall',
        explain:
          '查全率，即正确预测为正的，占全部实际为正的比例。*此处为macro平均',
        percent: data ? `${(data.recall_test * 100).toFixed(2)}%` : '-',
        dasharray: `${data.recall_test * 70 * Math.PI}px,${70 * Math.PI}px`,
      }
    )
    this.labelListString = `${data?.label_list?.toString()}`
    this.souceData = this.modelData?.data?.model_info
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 22px;

  b {
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}

.result {
  span {
    margin-left: 16px;
  }

  .table {
    margin: 16px 0;
  }
}

.dtc_table {
  border-collapse: collapse;
  border-color: #e8e8e8;
  line-height: 36px;
  margin-top: 8px;
  min-height: 36px;
  text-align: center;
  width: 100%;

  th {
    background: #fafafa;
  }
}

.dtc_table tr th,
.dtc_table tr td {
  border: 1px solid #e8e8e8;
}

.progress {
  animation: rotate 1500ms linear both;
}

.access {
  border: 1px solid #e8e8e8;
  height: 128px;
  margin-bottom: 24px;
  width: 100%;

  .circle-block {
    align-items: center;
    border-right: 1px solid #e8e8e8;
    display: flex;
    height: 100px;
    justify-content: center;
    margin-top: 12px;

    .c-c-c {
      height: 80px;
      transform: rotate(-90deg);
      width: 80px;
    }

    .blue-circle {
      transform-origin: 50% 50%;
    }

    .circle-title {
      margin-left: 16px;

      .icon {
        font-size: 14px;
        margin-left: 8px;
      }
    }
  }
}
</style>
